<template>
  <div class="shop">
    <Pane>
      <span slot="title">店铺详情</span>
      <section slot="content">
        <div class="shop-info">
          <ul>
            <li class="shop-info-item">
              <label for="">店铺id: </label>
              <span>{{ shop.id }} </span>
            </li>
            <el-divider></el-divider>
            <li class="shop-info-item">
              <label for="">店铺名称: </label>
              <span>{{ shop.name }} </span>
            </li>
            <el-divider></el-divider>
            <li class="shop-info-item">
              <label for="">公告: </label>
              <span> {{ shop.bulletin }}</span>
            </li>
            <el-divider></el-divider>
            <li class="flex-align-center shop-info-item">
              <label for="">店铺头像: </label>
              <!-- <span>{{shop.avatar }} </span> -->
              <!-- <img :src="shop.avatar" class="avatar"> -->
              <el-avatar shape="circle" :size="50" :src="shop.avatar"></el-avatar>
            </li>
            <el-divider></el-divider>
            <li class="shop-info-item">
              <label for="">配送费: </label>
              <span>{{ shop.deliveryPrice }} </span>
            </li>
            <el-divider></el-divider>
            <li class="shop-info-item">
              <label for="">送达时间: </label>
              <span>{{ shop.deliveryTime | fiflterCtime }} </span>
            </li>
            <el-divider></el-divider>
            <li class="shop-info-item">
              <label for="">描述: </label>
              <span>{{ shop.description }} </span>
            </li>
            <el-divider></el-divider>
            <li class="shop-info-item">
              <label for="">评分: </label>
              <span>{{ shop.score }} </span>
            </li>
            <el-divider></el-divider>
            <li class="shop-info-item">
              <label for="">销量: </label>
              <span>{{ shop.sellCount }} </span>
            </li>
            <el-divider></el-divider>
            <li class="shop-info-item">
              <label for="">活动: </label>
              <span>{{ shop.supports }} </span>
            </li>
            <el-divider></el-divider>
            <li class="shop-info-item">
              <!-- <li class="shop-info-item"> -->
              <label for="">店铺图片: </label>
              <!-- <span>{{shop.pics }} </span> -->
              <div class="flex">
                <div v-for="(item, i) in this.shopImg" v-bind:key="i">
                  <img :src="item" class="avatar" />
                  <!-- <p>{{item}}</p> -->
                </div>
              </div>
            </li>
            <el-divider></el-divider>
            <li class="shop-info-item">
              <label for="">营业时间: </label>
              <span>{{ shop.date }} </span>
            </li>
            <el-divider></el-divider>
            <li class="shop-info-item">
              <label for="">起送价格: </label>
              <span>{{ shop.minPrice }} </span>
            </li>
            <el-divider></el-divider>
            <li>
              <el-button type="success" @click="handleSave">保存</el-button>
            </li>
          </ul>
        </div>
      </section>
    </Pane>
  </div>
</template>

<script>
import Pane from '@/components/Pane/Pane'
import { getShopInfo } from '@/api/shop.js'
import { updateAvatar } from '@/api/account.js'
import moment from 'moment'

export default {
  components: {
    Pane
  },
  data() {
    return {
      imgUrl: '',
      imgUrlNew: '',
      shop: {},
      shopImg: [],
      imgBaseUrl: 'http://127.0.0.1:5000/upload/imgs/acc_img/'
    }
  },
  created() {
    this.getShopInfo()
  },
  filters: {
    fiflterCtime: time => {
      return moment(time).format('YYYY-MM-DD HH:MM:SS')
    }
  },
  methods: {
    handleAvatarSuccess(res) {
      const { code, msg, imgUrl } = res
      if (code === 0) {
        this.$message.success(msg)
        this.imgUrl = this.imgBaseUrl + imgUrl
        this.imgUrlNew = imgUrl
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 4

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG,png,gif 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 4MB!')
      }
      return isJPG && isLt2M
    },
    async handleSave() {
      const data = await updateAvatar({ imgUrl: this.imgUrlNew })
      if (data.code === 0) {
        this.$bus.$emit('update_avatar')
        this.$message.success('上传成功')
        location.reload()
      }
    },
    // 获取信息
    async getShopInfo() {
      const { data } = await getShopInfo()
      console.log(data)
      this.shop = data
      let str = 'http://127.0.0.1:5000/upload/shop/'
      str += this.shop.avatar
      this.shop.avatar = str
      // console.log("-->>>>>>>>>"+this.shop)
      for (let index = 0; index < this.shop.pics.length; index++) {
        // const element = array[index];
        this.shopImg[index] = 'http://127.0.0.1:5000/upload/shop/' + this.shop.pics[index]
      }
      console.log(this.shopImg)
    }
  }
}
</script>

<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flex-align-center {
  display: flex;
  align-items: center;
  .el-avatar {
    margin-left: 20px;
  }
}
label {
  color: rgb(51, 155, 86);
  font-size: 18px;
}
.flex {
  display: flex;
  margin-top: 10px;
  // justify-content: space-evenly;
  img {
    margin-right: 20px;
  }
}
.avatar-uploader,
.el-button {
  margin-top: 20px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
/deep/.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
